function mycarousel_initCallback(carousel)
{
		jQuery('#next_btn').bind('click', function() {
        carousel.next();
        return false;
    });
		
		jQuery('#prev_btn').bind('click', function() {
        carousel.prev();
        return false;
    });
		
		jQuery('#play_btn').bind('click', function() {
				document.getElementById("play_btn").style.display = "none";
				document.getElementById("pause_btn").style.display = "inline";
				carousel.startAuto(2);
        return false;
    });
		
		jQuery('#pause_btn').bind('click', function() {
				document.getElementById("play_btn").style.display = "inline";
				document.getElementById("pause_btn").style.display = "none";
				carousel.startAuto(0);
        return false;
    });
		
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() 
		{
			carousel.stopAuto();
		}, function() 
		{
			carousel.startAuto();
		});
};

function mycarousel_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
    // No animation on first load of the carousel
    if (state == 'init')
        return;
 
		display(idx);
};

function mycarousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
    display(idx);
};

function mycarousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {};
 
function mycarousel_itemVisibleOutCallbackAfterAnimation(carousel, item, idx, state) {};

function display(current_item)
{
	document.getElementById("featured_number").innerHTML = current_item + '/' + '5';
}

jQuery(document).ready(function() {
    jQuery('#featured_posts').jcarousel({
        auto: 3,
				scroll: 1,
        wrap: 'last',
        initCallback: mycarousel_initCallback,
				itemVisibleInCallback: {
            onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation,
            onAfterAnimation:  mycarousel_itemVisibleInCallbackAfterAnimation
        }
    });
});	
